<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<input type="text" placeholder="姓名">
		<input type="text" placeholder="年龄">
		<input type="text" placeholder="工资">
		<input type="button" value="添加">
		
		<table>
			<caption>员工表</caption>
			<tr>
				<th>姓名</th><th>年龄</th>
				<th>工资</th><th>操作</th>
			</tr>
		</table>
		
		<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				 $("input[value]").click(function(){
					 //创建td元素
					 var nametd = $("<td></td>");
					 var agetd = $("<td></td>");
					 var salarytd = $("<td></td>");
					 var deltd = $("<td><input type='button' value='删除'></td>");
					 //删除按钮添加点击事件
					 deltd.children().click(function(){
						 //通过按钮找到td 通过td找到tr 然后删除
						 $(this).parent().parent().remove();
					 });
					 //给td赋值
					 nametd.text($("input:eq(0)").val());
					 agetd.text($("input:eq(1)").val());
					 salarytd.text($("input:eq(2)").val());
					 
					 //创建tr把四个td装进去
					 var tr = $("<tr></tr>");
					 tr.append(nametd);
					 tr.append(agetd);
					 tr.append(salarytd);
					 tr.append(deltd);
					 //把tr装进table
					 $("table").append(tr);
				 })
			})
		</script>
	</body>
</html>














